// components/HomePageClient.js
"use client";
import { Divider, List, Avatar, Button, Input, Space } from "antd";
import { useRouter } from "next/navigation";
import { Suspense, useState, useEffect } from "react";

const HomePageClient = ({ initialData = [] }) => {
  const router = useRouter();
  const [content, setContent] = useState("初始化");
  const [sharedData, setSharedData] = useState("initialData");
  const [avatarList] = useState(initialData);

  useEffect(() => {
    fetch("/api/shared-data")
      .then((response) => response.json())
      .then((res) => setSharedData(res.data));
  }, []);

  const updateData = () => {
    fetch("/api/shared-data", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ data: "Updated Data" }),
    })
      .then((response) => response.json())
      .then((res) => setSharedData(res.data));
  };

  const handleClick = () => {
    router.push("/other");
  };

  const handleChange = (e) => {
    setContent(e.target.value);
  };

  return (
    <Space
      direction="vertical"
      size="middle"
      style={{
        display: "flex",
      }}>
      <Space>
        <Button type="primary" onClick={handleClick}>
          跳转测试
        </Button>

        <Button onClick={updateData}>接口测试</Button>
      </Space>
      <Divider orientation="left">Default Size</Divider>
      <List
        itemLayout="horizontal"
        dataSource={avatarList}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
              title={<a href="https://ant.design">{item.title}</a>}
              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
            />
          </List.Item>
        )}
      />
      <p>{content}</p>
      <p>{sharedData}</p>
      <div>
        <Input type="text" value={content} onChange={handleChange} />
      </div>
    </Space>
  );
};

export default HomePageClient;
